<!-- ---------- 数实一体 --------- -->
<template>
    <headerView></headerView>
    <div class="numvisual">
        <numVisual></numVisual>
    </div>
    <div class="numReal">
        <!-- <div class="banner">
            <img src="../../assets/images/marketing-braner.png" alt="">
            <div class="banner-t">
                <span>数实一体化</span>
            </div>
        </div> -->
        <!--  -->
        <!-- <div class="numSkill ">
            <h3 class="title">数字技术</h3>
            <div class="one-box">
                <img src="../../assets/images/num-onemap.png" class="map" alt="">
                <div class="right">
                    <div class="item">
                        <img src="../../assets/images/num-oneright1.png" alt="">
                        <p><span>供应链</span></p>
                    </div>
                    <div class="item">
                        <img src="../../assets/images/num-oneright2.png" alt="">
                        <p><span>物流云仓</span></p>
                    </div>
                </div>
            </div>
            <div class="one-botm">
                作为一家专注于<b>供应链提供及数实融合</b>解决方案的创新型企业，
                植根于数字经济发展的前沿阵地，致力于构建高效、智能、协同、
                供销一体化服务平台。
            </div>
        </div> -->
        <!-- 实体实体供应链 -->
        <div class="entity center-text">
            <h3 class="title">实体供应链</h3>
            <div class="tow-box">
                <div class="item">
                    <img src="../../assets/images/num-oneright1.png" alt="">
                    <p><span>物流云仓</span></p>
                </div>
                <div class="item">
                    <img src="../../assets/images/num-tow2.png" alt="">
                    <p><span>API共享</span></p>
                </div>
                <div class="item">
                    <img src="../../assets/images/num-tow3.png" alt="">
                    <p><span>技术支持</span></p>
                </div>

            </div>
        </div>
        <!-- 加入万物通 -->
        <div class="joinW">
            <h3 class="title">加入万物通</h3>
            <div class="en-center  center-text">
                <div class="tow">
                    <h5 class="title-tow">我要入驻</h5>
                    <ul class="left-ul">
                        <li>
                            <div class="left-li-num">{{ activeName[0].title }}</div>
                            <div class="left-li-text" @click="enterActiveFn(0, $event)">
                                <div class="item-text cursor" v-for="(text, indexT) in activeName[0].item"
                                    :class="{ 'entActive': entActDat[0] == indexT }" :id=indexT>{{ text
                                    }}</div>
                            </div>
                        </li>
                        <li>
                            <div class="left-li-num">{{ activeName[1].title }}</div>
                            <div class="left-li-text" @click="enterActiveFn(1, $event)">
                                <div class="item-text cursor" v-for="(text, indexT) in activeName[1].item"
                                    :class="{ 'entActive': entActDat[1] == indexT }" :id=indexT>{{ text
                                    }}</div>
                            </div>
                        </li>
                        <li>
                            <div class="left-li-num">{{ activeName[2].title }}</div>
                            <div class="left-li-text" @click="enterActiveFn(2, $event)">
                                <div class="item-text cursor" v-for="(text, indexT) in activeName[2].item"
                                    :class="{ 'entActive': entActDat[2] == indexT }" :id=indexT>{{ text
                                    }}</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="declare  center-text">
                <div class="title-dec">
                    <h3 class="title-tow">入驻流程</h3>
                </div>
                <div class="declare-item">
                    <div class="item" v-for="item in classifyData">
                        <div>{{ item.text }} <span>{{ item.titme }}</span></div>
                        <p>{{ item.towText }}</p>
                    </div>
                </div>
                <div class="btn-home cursor" @click="clickskip">立即入驻</div>
            </div>
        </div>
    </div>
    <bottomView></bottomView>
</template>
<script setup>
import { ref, onUnmounted, onMounted } from "vue";

const classifyData = ref([{
    text: '入驻申请',
    titme: '3-5分钟',
    towText: "登录后提交营业执照，法人经营者身份证明，店铺LOGO等"
}, {
    text: '等待审核',
    titme: '1-3个工作日',
    towText: "等待商服人员审核资料，所需时间1～3个工作日，请注意接收短信通知。"
}, {
    text: '进入洽谈',
    // titme: '',
    towText: "招商经理1V1服务，洽谈合作细节，签订合同"
}, {
    text: '开始合作',
    // titme: '',可自主产品上传，主动报品传商品后即可进行直播报品
    towText: `供应商合作后，平台商、
   分销商、项目合伙人合作后，可自主选品，API接入、同步产品等。`
},])
// 
const activeName = ref([{ title: '合作方式', item: ['供应商', '平台商', '分销商', '项目合作'], isShow: [false, false, false] },
{ title: '公司性质', item: ['生产厂商', '品牌商', '代理商', '其它'], isShow: [false, false, false] },
{ title: '业务类型', item: ['一件代发', '批量集采', '线下商超'], isShow: [false, false, false] }])
// 入驻材料
const entActDat = ref([-1, -1, -1])
const enterActiveFn = (index, e) => {
    entActDat.value[index] = e.target.id
}
// 
function clickskip() {
    window.open(`https://www.wwtscm.com/#/`)
}

</script>
<style scoped lang="scss">
@import "@/assets/base.scss";

@keyframes scaleanm {}

.numvisual {
    padding-top: 4.5vw;
    background-color: #fff;
}

.numReal {
    // 标题
    .title {
        font-size: $title-font-size1;
        font-weight: 700;
        text-align: center;
        margin: 3.5vw 0;

        &::after {
            display: block;
            content: '';
            width: 2.6vw;
            height: 0.4vw;
            background-color: $firm-color;
            margin: 0 auto;
            border-radius: 0.2vw;
            margin-top: 0.6vw;
        }
    }

    // 版心居中
    .center-text {
        width: 68%;
        margin: 0 auto;
    }

    // 广告
    .banner {
        position: absolute;
        top: 0vw;
        width: 100%;
        height: 40vw;
        overflow: hidden;

        img {
            width: 100%;
            height: 40vw;
        }

        .banner-t {
            position: absolute;
            font-size: $max-font-size;
            left: 10%;
            top: 50%;

            span {
                color: #fff;
                background-image: url('../../assets/images/home-tbgc.png');
                background-repeat: no-repeat;
                background-position: left bottom;
                background-size: 100% 0.4vw;
                font-weight: 700;
            }
        }

        // 内容
    }

    // 数字技术
    .numSkill {
        margin-top: 42vw;
        height: 57vw;
        background-image: url('../../assets/images/num-onebgc.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 76.35vw 100%;
        background-color: #FAFCFF;
        padding-top: 2vw;

        .one-box {
            display: flex;
            justify-content: center;

            .map {
                height: 41.5vw;
            }

            .right {
                .item {
                    width: 20.3vw;
                    margin-top: 3vw;

                    img {
                        width: 100%;
                    }

                    p {
                        width: 92%;
                        height: 4vw;
                        margin: 0 auto;
                        background-color: #fff;
                        box-shadow: $box-shadow-all;
                        border-radius: 0.5vw;
                        font-size: $title-font-size4;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        span {
                            background-image: url('../../assets/images/home-tbgc.png');
                            background-repeat: no-repeat;
                            background-position: left bottom;
                        }
                    }
                }
            }

        }

        .one-botm {
            width: 37vw;
            font-size: $title-font-size7;
            color: #666;
            margin: 0 auto;
            text-align: center;

            b {
                font-weight: 700;
            }
        }
    }

    // 实体供应链
    .entity {
        .tow-box {
            display: flex;
            justify-content: space-between;

            .item {
                width: 20.3vw;
                margin-top: 3vw;

                img {
                    width: 100%;
                    height: 13vw;
                }

                p {
                    width: 92%;
                    height: 4vw;
                    margin: 0 auto;
                    background-color: #fff;
                    box-shadow: $box-shadow-all;
                    border-radius: 0.5vw;
                    font-size: $title-font-size4;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    span {
                        background-image: url('../../assets/images/home-tbgc.png');
                        background-repeat: no-repeat;
                        background-position: left bottom;
                    }
                }

            }
        }
    }

    // 加入万物通
    .joinW {

        background-color: #FAFCFF;

        .en-center {
            background-color: #fff;
            margin-top: 2.5vw;
            display: flex;
            font-size: $title-font-size7;
            border: #f1f1f1 0.1vw solid;
            border-radius: 0.5vw;
            margin-bottom: 1.2vw;

            .title-tow {
                font-size: $title-font-size8;
            }

            .tow {
                background-color: #fff;
                border-radius: 1vw;
                padding: 2.1vw;
                margin-right: 1.2vw;

                h5 {
                    margin-bottom: 3.2vw;
                }


                .left-ul {
                    li {
                        display: flex;
                        margin-bottom: 1.2vw;
                        align-items: center;

                        .left-li-num {
                            font-size: $title-font-size5 ;
                        }

                        .left-li-text {
                            display: flex;

                            .entActive {
                                background-color: rgba($color: $firm-color, $alpha: 0.2) !important;
                            }

                            .item-text {
                                width: 7.5vw;
                                height: 2.5vw;
                                background-color: #f0f3fa;
                                border-radius: 0.4vw;
                                margin-left: 1.2vw;

                                text-align: center;
                                line-height: 2.5vw;
                                font-size: $title-font-size6;
                            }
                        }
                    }
                }
            }
        }

        .declare {
            background-color: #fff;
            border: #f1f1f1 0.1vw solid;
            border-radius: 0.73vw;
            padding: 1vw;
            margin-bottom: 4vw;


            .title-dec {
                font-size: $title-font-size8;
                margin-bottom: 1.6vw;
            }

            .declare-item {
                display: flex;
                justify-content: space-evenly;
                // width: 70vw;

                .item {
                    width: 16.5vw;
                    height: 7.8vw;
                    background-color: #fff;
                    border-radius: 0.73vw;
                    padding: 0.6vw;
                    border: #f1f1f1 0.1vw solid;
                    margin-right: 0.5vw;

                    div {
                        font-size: $title-font-size6;
                        margin-bottom: 1vw;
                        font-weight: 700;

                        span {
                            display: inline-block;
                            font-size: $title-font-size7 ;
                            color: $firm-color;
                            background-color: #dfeafe;
                            padding: 0 0.3vw;
                            border-radius: 0.1vw;
                            margin-left: 0.5vw;
                        }
                    }

                    p {
                        color: #666;
                        font-size: $title-font-size7;
                    }
                }
            }

            .btn-home {
                width: 9.6vw;
                height: 2.6vw;
                background-color: $firm-color;
                font-size: $title-font-size6;
                line-height: 2.6vw;
                text-align: center;
                border-radius: 0.5vw;
                margin: 2vw auto;
                border: #f1f1f1 0.1vw solid;
                color: #fff;
            }
        }
    }
}
</style>